<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">
    <link rel="stylesheet" href="./css/apple.css">
    <script src="./js/jquery-3.2.1.js" charset="utf-8"></script>
    <script src="./js/apple.js" charset="utf-8"></script>
    <script src="./js/bootstrap.js" charset="utf-8"></script>
    <script src="./js/cookie.js" charset="utf-8"></script>
    <script src="./js/gulpfile.js" charset="utf-8"></script>
  </head>
  <body>
    <!-- 导航部分 -->
    <header class="navbar navbar-fix-top navbar-default" style="background:rgba(0,0,0,0.8)">
      <div class="container">
        <div class="navbar-header">
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="button" name="button" data-toggle="collapse" aria-expanded="false" data-target="#navbar">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="./img/logo2.png" alt=""></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
          <ul class="nav navbar-nav sit-navbar">
            <li><a href="#">Mac</a></li>
            <li><a href="#">iPad</a></li>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Watch</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">技术支持</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
          </ul>
        </div>
        <div class="right dropdown">
          <span id="span"
            class="glyphicon glyphicon-lock dropdown-toggle"  type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="color:#fff">
          </span>
          <ul class="dropdown-menu text-right" aria-labelledby="dropdownMenu1">
            <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> 购物袋</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-heart-empty"></span> 收藏</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-th-large"></span> 订单</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-cog"></span> 账户</a></li>
            <li role="separator" class="divider"></li>
            <li>
              <a href="#">
                <button id="btnTag" type="button" data-toggle="modal" data-target="#model" name="button"><span class="glyphicon glyphicon-user">登录</span></button>
              </a>
            </li>
          </ul>
          <!-- 模态弹窗 -->
          <div class="modal fade" tabindex="-1" role="dialog" id="model">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                 <form class="" action="index.html" method="post">
                    <div class="form-group">
                        <lable for="user">用户名</lable>
                        <input class="form-control" id="user" type="text" name="user" value="">
                        <lable for="user">密码</lable>
                        <input class="form-control" id="pass" type="text" name="pass" value="">
                    </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                <button id="btnDL" type="button" class="btn btn-primary">登录</button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </header>


    <!-- 主体 -->
    <main class="container">
      <div class="row">
        <h1 class="text-center">iPhone</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/1.png" alt="">
      </div>
      <div class="row">
        <h1 class="text-center">iPhoneX</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/2.png" alt="">
      </div>
      <div class="row">
        <h1 class="text-center">iPhoneY</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/3.png" alt="">
      </div>
      <div class="row col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <h1 class="text-center">iPhoneY</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/4.png" alt="">
      </div>
      <div class="row col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <h1 class="text-center">iPhoneY</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/4.png" alt="">
      </div>
      <div class="row col-lg-6 col-md-6 col-sm-12 col-xs-12 ">
        <h1 class="text-center">iPhoneY</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/4.png" alt="">
      </div>
      <div class="row col-lg-6 col-md-6 col-sm-612 col-xs-12 ">
        <h1 class="text-center">iPhoneY</h1>
        <p class="text-center">新一代iphone</p>
        <img class="img-responsive" src="./img/4.png" alt="">
      </div>
    </main>


    <!-- 页尾部分 -->
    <footer class="navbar">
      <div class="col-md-2">
        <div class="navbar-header">
          <h5>选购及了解</h5>
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list1" id="btn">
              <span>+</span>
          </button>
        </div>
        <div id="list1" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Mac</a></li>
            <li><a href="#">ipad</a></li>
            <li><a href="#">ipone</a></li>
            <li><a href="#">watch</a></li>
            <li><a href="#">Music</a></li>
            <li><a href="#">iTunes</a></li>
            <li><a href="#">iPod touch</a></li>
            <li><a href="#">配件</a></li>
            <li><a href="#">App store充值卡</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2">
        <div class="navbar-header">
            <h5>选购及了解</h5>
            <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list2" id="btn">
                <span>+</span>
            </button>
          </div>
        <div id="list2" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">查找零售店</a></li>
              <li><a href="#">GeniusBar天才吧</a></li>
              <li><a href="#">Today at Apple</a></li>
              <li><a href="#">Apple夏令营</a></li>
              <li><a href="#">Field Trip课外活动</a></li>
              <li><a href="#">Apple Store App</a></li>
              <li><a href="#">翻新和优惠</a></li>
              <li><a href="#">分期补款</a></li>
              <li><a href="#">重复使用和循环利用</a></li>
              <li><a href="#">订单状态</a></li>
              <li><a href="#">选购帮助</a></li>
            </ul>
          </div>
      </div>
      <div class="col-md-2">
        <div class="navbar-header">
          <h5>教育应用</h5>
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list3" id="btn">
              <span>+</span>
          </button>
        </div>
        <div id="list3" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Apple与教育</a></li>
            <li><a href="#">高校师生选购</a></li>
          </ul>
        </div>
        <div class="navbar-header">
          <h5>教育应用</h5>
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list4" id="btn">
              <span>+</span>
          </button>
        </div>
        <div id="list4" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Apple与教育</a></li>
            <li><a href="#">高校师生选购</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2">
        <div class="navbar-header">
          <h5>账户</h5>
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list5" id="btn">
              <span>+</span>
          </button>
        </div>
        <div id="list5" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">管理你的ID</a></li>
            <li><a href="#">iApple Store 账户</a></li>
            <li><a href="#">iCloud.com</a></li>
          </ul>
        </div>
      </div>
      <div class="col-md-2">
        <div class="navbar-header">
          <h5>Apple价值观</h5>
          <button aria-controls="navbar" class="navbar-toggle collapsed" type="" name="button" data-toggle="collapse" aria-expanded="false" data-target="#list6" id="btn">
              <span>+</span>
          </button>
        </div>
        <div id="list6" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">辅助功能</a></li>
            <li><a href="#">环境责任</a></li>
            <li><a href="#">隐私</a></li>
            <li><a href="#">供应商责任</a></li>
          </ul>
        </div>
      </div>

      <div class="bottom">
        <p>更多选购方式：前往<a href="#">App Store零售店</a>，致电 400-666-8800 或查找在你附近的<a href="#">授权经销商</a></p>
        <p>Copyright © 2017 Apple Inc. 保留所有权利。</p>
        <ul class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
          <li>隐私政策</li>
          <li>使用条款</li>
          <li>销售政策</li>
          <li>法律信息</li>
          <li>网站地图</li>
        </ul>
        <img src="./img/xiaomeiguo.png" alt="">
        <span class="col-lg-12 col-md-12 col-sm-12 col-xs-12">京公安网安备 11010502008968 京ICP备10214630</span>
      </div>
    </footer>


  </body>
</html>
